$(function () {
    var currentPage = 1; //当前页
    var pageSize = 5; //每页数据条数
    // 1.首页渲染
    function render() {
        $.ajax({
            type: 'get',
            url: '/category/queryTopCategoryPaging',
            data: {
                page: currentPage,
                pageSize: pageSize
            },
            dataType: 'json',
            success: function (res) {
                console.log(res);
                $('tbody').html(template('tmp', res))
                //  调用分页函数传入正式的数据总数，生成分页
                setPage(res.total)
            }
        })
    }
    render();
    // 2.生成分页
    function setPage(total) {
        $("#paginator").bootstrapPaginator({
            bootstrapMajorVersion: 3,//默认是2，如果是bootstrap3版本，这个参数必填
            currentPage: currentPage,//当前页
            totalPages: Math.ceil(total / pageSize),//总页数
            size: "small",//设置控件的大小，mini, small, normal,large
            onPageClicked: function (event, originalEvent, type, page) {
                //为按钮绑定点击事件 page:当前点击的按钮值
                console.log(page);
                //改变当前页面取值
                currentPage = page
                //页面重新渲染
                render();
            }
        });
    }
    // 3.表单校验
    $('#addform').bootstrapValidator({
        //1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
        excluded: [':disabled', ':hidden', ':not(:visible)'],

        //2. 指定校验时的图标显示，默认是bootstrap风格
        feedbackIcons: {
            valid: 'glyphicon glyphicon-thumbs-up',
            invalid: 'glyphicon glyphicon-thumbs-down',
            validating: 'glyphicon glyphicon-refresh'
        },
        //3. 指定校验字段
        fields: {
            //校验用户名，对应name表单的name属性
            categoryName: {
                validators: {
                    //不能为空
                    notEmpty: {
                        message: '分类不能为空，请重新输入！'
                    },
                    // 长度校验
                    stringLength: {
                        min: 2,
                        max: 12,
                        message: '一级分类必须2-12位哦！'
                    },
                }
            }
        }
    })
    // 4.添加一级分类
    // $('.btn-ok').on('click', function () {
    //     // console.log( $('.form-value').val());
    //     $.ajax({
    //          type: 'post',
    //          url: '/category/addTopCategory',
    //          data: {
    //             categoryName: $('.form-value').val()
    //          },
    //          dataType: 'json',
    //          success: function (res) {
    //             // console.log(res);
    //             if(res.success){
    //                 // 判断成功，隐藏模态框
    //                 $('.modal-add').modal('hide')
    //                 // value = ''
    //                 // $('.form-value').val('')
    //                  // resetForm重置表单数据数据
    //                 $('#addform').data('bootstrapValidator').resetForm(true);
    //                 // 重新渲染
    //                 render();
    //             }
              
    //          }
    //      })
    // })
    $("#addform").on('success.form.bv',function (e) {
        e.preventDefault()
        $.ajax({
            type: 'post',
            url: '/category/addTopCategory',
            data: $('#addform').serialize(),
            dataType: 'json',
            success: function (res) {
               // console.log(res);
               if(res.success){
                   // 判断成功，隐藏模态框
                   $('.modal-add').modal('hide')
                   // resetForm重置表单数据数据
                   $('#addform').data('bootstrapValidator').resetForm(true);
                   // 重新渲染
                   render();
               }
            }
        }) 
    })
})